<template>
    <rx-layout>
        <template v-slot:center>
            <div class="bpm-view">
                <span class="bpm-view-name"><span v-if="taskConfig.switchOptions.includes('opinionRequired')"
                                                  class="bpm-opinion">*</span>{{i18n('opinion','审批意见')}}</span>
                <div v-if="showOpinion()">
              <span v-for="checkItem in checkTypes">
                        <radio :checked="checkItem.value == checkType"
                               @click.stop="checkTypeChange(checkItem.value)"/>
                        <span style="margin-right: 1rem">{{ checkItem.text }}</span>
              </span>
                </div>
                <textarea class="bpm-view-textarea" :placeholder="i18n('opinionInput','请输入审批意见') " v-model="opinion"></textarea>
            </div>
            <div class="bpm-direction" v-if="canShowNextTask()">
                <bpm-task-executors ref="taskExecutors" style="margin-top: 12px" :nodeExecutors="nodeExecutors"></bpm-task-executors>
            </div>
            <div class="bpm-view" style="margin-top: 10px">
                <span class="bpm-view-name">{{i18n('cc','抄送')}}</span>
                <RxVueUserDialog style="margin-top: 15px" v-model="copyUsers"
                                 :organization="true"></RxVueUserDialog>
            </div>
        </template>
        <template v-slot:footer>
            <div class="bpm-footer">
                <div class="bpm-footer-close" @click="closeWindow">{{i18n('close','取消')}}</div>
                <div class="bpm-footer-close" @click="temporaryOpinion">{{i18n('btnProvisional','暂存意见')}}</div>
                <div class="bpm-footer-ok" @click="handleCompleteCheck">{{i18n('commitBtn','提交')}}</div>
            </div>
        </template>
    </rx-layout>
</template>

<script>
import BpmtaskApi from "@/api/rxBpm/bpmTask"
import util from '@/js/Util.js'
import RxVueUserDialog from '@/components/RxVueUserDialog';
import RxLayout from '@/components/RxLayout'
import BpmTaskExecutors from './BpmTaskExecutors'

export default {
    name: "BpmTaskCheck",
    components: {
        RxVueUserDialog,
        RxLayout,
        BpmTaskExecutors
    },
    data() {
        return {
            /**
             * 表单JSON
             */
            formJson: '',
            systemHand: '',
            /**
             * 任务配置JSON
             */
            taskConfig: {},
            //显示更多选项。
            showMoreOptions: true,
            //执行人单选
            singleExecutor: false,
            //执行人
            nodeExecutors: [],
            taskId: '',
            fileList: [],//附件
            copyUsers: [],//抄送
            relInsts: [],//关联流程
            opinion: "",//意见
            temporaryOpinionObj: {},
            checkType: 'AGREE',
            opinionName: '',
            checkTypes: [
                {text: this.i18n('pass', '通过'), value: "AGREE"},
                {text: this.i18n('noPass', '不通过'), value: "REFUSE"}
            ],
        }
    },
    onLoad(option) {
        let approveTask = uni.getStorageSync('approveTask')
        let optionData = JSON.parse(approveTask);
        this.formJson = optionData.formJson;
        this.systemHand = optionData.systemHand;
        this.taskConfig = optionData.taskConfig;
        this.checkTypes = this.taskConfig.options
        this.showMoreOptions = optionData.showMoreOptions;
        this.opinionName = optionData.opinionName;
        this.taskId = optionData.taskId;
        //初始化用户数据。
        this.initUser();
        this.getTemporaryOpinion();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "bpmLang", key);
        },
        checkTypeChange(val) {
            this.checkType = val;
            BpmtaskApi.getTaskFlowNodesExecutors(this.taskId, val, JSON.parse(this.formJson), this.systemHand).then(res => {
                this.nodeExecutors = res;
            })
        },
        //是否显示意见。
        showOpinion() {
            //普通任务节点
            if (this.taskConfig.multipleType == 'normal' && this.taskConfig.showOpinion
                && this.taskConfig.options && this.taskConfig.options.length > 0) {
                return true;
            }
            if (this.taskConfig.multipleType != 'normal' && this.taskConfig.signConfig.options && this.taskConfig.signConfig.options.length > 0) {
                return true;
            }
            return false;
        },
        //是否显示下一步执行人。
        canShowNextTask() {
            return !this.taskConfig.switchOptions.includes("shieldExecutePath");
        },
        initUser() {
            BpmtaskApi.getTaskFlowNodesExecutors(this.taskId, 'AGREE', JSON.parse(this.formJson), this.systemHand).then(res => {
                this.nodeExecutors = res;
            })
        },
        //暂存意见
        temporaryOpinion() {
            var id = this.temporaryOpinionObj.id ? this.temporaryOpinionObj.id : "";
            if (this.taskId) {
                if (this.opinion) {
                    BpmtaskApi.temporaryOpinion(this.taskId, this.opinion, id).then(res => {
                        uni.showToast({
                            title:this.i18n('temporaryOpinions','暂存意见完成'), // 消息内容
                            duration: 2000, // 持续时间（单位：毫秒）
                            icon: 'none' // 图标类型（可选值：success/loading/none）
                        });
                        this.clickNavLeft()
                    });
                } else {
                    uni.showToast({
                        title:this.i18n('noNullOpin','意见不能为空'), // 消息内容
                        duration: 2000, // 持续时间（单位：毫秒）
                        icon: 'none' // 图标类型（可选值：success/loading/none）
                    });
                    return
                }
            }
        },
        //获取暂存意见
        getTemporaryOpinion() {
            if (this.taskId) {
                BpmtaskApi.getTemporaryOpinion(this.taskId).then(res => {
                    if (res) {
                        this.opinion = res.opinion;
                        this.temporaryOpinionObj = res;
                    }
                });
            }
        },
        //取消返回
        closeWindow() {
            this.clickNavLeft()
        },
        //提交
        handleCompleteCheck() {
            let self = this;
            //配置意见必填。
            if (this.taskConfig.switchOptions.includes("opinionRequired")) {
                if (!this.opinion) {
                    uni.showToast({
                        title:this.i18n('approvalOpinion','请填写审批意见'), // 消息内容
                        duration: 2000, // 持续时间（单位：毫秒）
                        icon: 'none' // 图标类型（可选值：success/loading/none）
                    });
                    return;
                }
            }
            //抄送用户
            let copyAccounts = this.getCopyUserAccounts();
            let nodeUserMap =this.$refs.taskExecutors? this.$refs.taskExecutors.getNodeUserMap():{};
            let destNodeId =this.$refs.taskExecutors? this.$refs.taskExecutors.getDestNodeId():'';
            let cmd = {
                taskId: self.taskId,
                checkType: self.checkType,
                opinion: self.opinion,

                copyUserAccounts: copyAccounts,
                copyUserUserIds: copyAccounts,
                nodeExecutors: nodeUserMap,
                formJson: self.formJson,
                systemHand: self.systemHand,
                opinionName: self.opinionName,
                opFiles: JSON.stringify(self.fileList),
                relInsts: JSON.stringify(self.relInsts)
            }
            //设置目标节点。
            if (destNodeId) {
                cmd.destNodeId = destNodeId;
            }
            BpmtaskApi.checkComplete(cmd).then(resp => {
                if (resp.success) {
                    uni.showToast({
                        title:this.i18n('approvalSuccessful','审批成功'), // 消息内容
                        duration: 2000, // 持续时间（单位：毫秒）
                        icon: 'none' // 图标类型（可选值：success/loading/none）
                    });
                    this.clickNavLeft(3)
                }
            })
        },
        /**
         * 获取抄送用户。
         * @returns {string}
         */
        getCopyUserAccounts() {
            let accounts = [];
            if (this.copyUsers && this.copyUsers.length > 0) {
                this.copyUsers.forEach(item => {
                    accounts.push(item.id);
                })
            }
            return accounts.join(",");
        },
    }
}
</script>

<style scoped>
.bpm-opinion {
    color: red;
    margin-right: 0.25rem;
}

.bpm-view {
    background: white;
    border-radius: 8px;
    padding: 12px;
    box-sizing: border-box;
}

.bpm-view-name {
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0px;
    line-height: 21px;
    color: rgba(0, 0, 0, 0.85);
}

.bpm-direction-name {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0px;
    line-height: 21px;
    display: block;
    color: rgba(0, 0, 0, 0.85);
    padding: 0px 12px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(232, 232, 232, 1);
}

.bpm-view-textarea {
    font-size: 0.8rem;
    height: 124px;
    width: calc(100% - 24px);
    margin-top: 15px;
    border-radius: 8px;
    border: 1px solid rgba(232, 232, 232, 1);
    padding: 10px 10px 10px 10px;
}

.bpm-direction {
    background: white;
    border-radius: 8px;
    box-sizing: border-box;
    margin-top: 10px;
    box-sizing: border-box;
    overflow: hidden;
}

.bpm-direction-center {
    display: flex;
}

.bpm-center {
    flex: 1;
    padding: 12px;
}

.bpm-center-name {
    font-size: 0.8rem;
    display: block;
    margin-bottom: 10px;
}


.bpm-footer {
    display: flex;
    grid-gap: 10px;
}

.bpm-footer-close {
    flex: 1;
    height: 45px;
    opacity: 1;
    border-radius: 8px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(232, 232, 232, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    text-align: center;
    color: rgba(0, 0, 0, 0.65);
}

.bpm-footer-ok {
    flex: 1;
    height: 45px;
    opacity: 1;
    border-radius: 8px;
    background: rgba(66, 133, 244, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    color: white;
}
</style>
